<template>
  <div class="mapview-pannel">
    <div id="mapview"></div>
  </div>
</template>

<script>
import { loadModules } from "esri-loader";
import mapInfo from "./mapInfo.vue";

export default {
  name: "Mapview",
  components: { mapInfo },
  data() {
    return {
      houseId: '',
      type: '', //判断下当前类型，加载不同的接口
      dj: '', //房屋等级
      lat: 0.0,
      lon: 0.0,
      id: "",
      address: '',
      parksLayer: {},
      parksLayer2: {},
    };
  },
  mounted() {
    this._createMapView()
  },
  methods: {
    //创建地图
    _createMapView: function () {
      const _self = this; //定义一个_self防止后续操作中this丢失
      const option = {
        url: "https://js.arcgis.com/4.18/init.js",
        css: "https://js.arcgis.com/4.18/esri/themes/light/main.css",
      };

      //通过loadModules来做衔接
      loadModules(
        [
          "esri/Map",
          "esri/views/MapView",
          "esri/config",
          "esri/Graphic",
          "esri/layers/GraphicsLayer",
          "esri/layers/FeatureLayer",
        ],
        option
      )
        .then(([Map, MapView, esriConfig, Graphic, GraphicsLayer, FeatureLayer]) => {
          esriConfig.apiKey =
            "AAPKdf2979e7d74a47c89d398c8715dc6272d1rJcplaaCYMDoyFMXavlgP41dIAEJ1AtiD_HaH4zbxgkpbazqf9C9E3pveLBGsG";
          //业务代码在此处编写
          const map = new Map({
            //实例化地图
            basemap: "satellite",
          });

         //实例化地图视图
          let view = new MapView({
            container: "mapview",
            map: map,
            zoom: 18,
            center: [this.lon, this.lat],
          });

          const graphicsLayer = new GraphicsLayer();

          const point = {
            type: "point",
            longitude: this.lon,
            latitude: this.lat,
          };
          const simpleMarkerSymbol = {
            type: "simple-marker",
            color: [226, 119, 40], // Orange
            outline: {
              color: [255, 255, 255], // White
              width: 1,
            },
          };
          const pointGraphic = new Graphic({
            geometry: point,
            symbol: simpleMarkerSymbol,
          });
          graphicsLayer.add(pointGraphic);
          map.add(graphicsLayer);

          let urls = "";
          if (this.type == "cityzz") {
            //城市独立
            urls =
              "https://gis.sdhuan.cn/arcgis/rest/services/2022370800cityon/MapServer";
          } else if (this.type == "cityfzz") {
            urls =
              "https://gis.sdhuan.cn/arcgis/rest/services/2022370800citynon/MapServer";
          } else if (this.type == "ncdl") {
            urls =
              // 'https://gis.sdhuan.cn/arcgis/rest/services/370800villagefz/MapServer'
              // 'https://gis.sdhuan.cn/arcgis/rest/services/370800villagedlfz/MapServer'
              "https://gis.sdhuan.cn/arcgis/rest/services/2022370800villagedlfz/MapServer";
          } else if (this.type == "ncjh") {
            urls =
              "https://gis.sdhuan.cn/arcgis/rest/services/2022370800villagejh/MapServer";
          } else if (this.type == "ncfzz") {
            urls =
              "https://gis.sdhuan.cn/arcgis/rest/services/2022370800villagenon/MapServer";
          } else {
            urls =
              "https://gis.sdhuan.cn/arcgis/rest/services/2022370800cityon/MapServer";
          }
          this.parksLayer = new FeatureLayer({
            url: urls,
          });
          map.add(this.parksLayer, 0); // 图层 后边加一个0是因为上边的点，要不然会被遮盖
          console.log("jiazaijieshu", this.type);
          this.queryFeatureLayer(view, view.extent);
          
        })
        .catch((err) => {
          _self.$message("地图创建失败，" + err);
        });
    },

    //查询条件下的数据
    queryFeatureLayer(view, extent) {
      console.log(view, extent, 'qqqq----view, extent=======')
      const parcelQuery = {
        where: "fwbh='" + this.houseId + "'", // 查询条件
        spatialRelationship: "intersects", // 空间关系 "intersects"|"contains"|"crosses"|"disjoint"|"envelope-intersects"|"index-intersects"|"overlaps"|"touches"|"within"|"relation"
        geometry: extent, // Restricted to visible extent of the map
        outFields: ["*"], // 输出查询的字段
        returnGeometry: true,
        outSR: "",
        layer: { source: { type: "mapLayer", mapLayerId: 4 } },
      };

      this.parksLayer
        .queryFeatures(parcelQuery)
        .then((results) => {
          this.displayResults(view, results);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    displayResults(view, results) {
      var symbol = {};
      if (this.dj == 1) {
        symbol = {
          type: "simple-fill",
          color: [20, 130, 200, 0.5],
          outline: {
            color: "green",
            width: 3,
          },
        };
      } else if (this.dj == 2) {
        symbol = {
          type: "simple-fill",
          color: [20, 130, 200, 0.5],
          outline: {
            color: "blue",
            width: 3,
          },
        };
      } else if (this.dj == 3) {
        symbol = {
          type: "simple-fill",
          color: [20, 130, 200, 0.5],
          outline: {
            color: "yellow",
            width: 3,
          },
        };
      } else if (this.dj == 4) {
        symbol = {
          type: "simple-fill",
          color: [20, 130, 200, 0.5],
          outline: {
            color: "red",
            width: 3,
          },
        };
      } else {
        symbol = {
          type: "simple-fill",
          color: [20, 130, 200, 0.5],
          outline: {
            color: "gray",
            width: 3,
          },
        };
      }
      var popupTemplate = {};
      popupTemplate = {
          title: "房屋编号： {fwbh}",
          content: "地址：" + this.address,
        };

      // Assign styles and popup to features
      results.features.map((feature) => {
        feature.symbol = symbol;
        feature.popupTemplate = popupTemplate;
        return feature;
      });

      // Clear display
      view.popup.close();
      view.graphics.removeAll();
      // Add features to graphics layer
      view.graphics.addMany(results.features);
    },
  },
};
</script>

<style>
.mapview-pannel,
#mapview {
  /* position: relative; */
  width: 95%;
  height: 500px;
}

.shadediv {
  /* position: absolute; */
  width: 95%;
  height: 500px;
  background: gray;
}
</style>
